<script setup>
import { ref } from 'vue';

import { getFriendList } from '@/api/friends';
import { useRoute, useRouter } from 'vue-router'
import { showDialog } from 'vant';
import { getGroupChatList } from '@/api/groupchat';

const router = useRouter() //路由方法
const route = useRoute() //路由方法
const onClickLeft = () => history.back();  //顶部返回按钮
const mes = ref([])  // 存放好友数据
const value = ref(''); // 搜索框的值
const show = ref(true) // 定义一个变量用于列表的显示
const searchMes = ref([])  // 定义一个变量存储搜索的数据
const inputCheck = ref(false)
// 发送请求-------获取好友列表
getFriendList().then(res => {
    mes.value = res.data.message
    console.log(mes.value);
})

// 搜索功能
function onSearch() {
    console.log(value.value);
    show.value = false // 不再展示消息列表，展示一个下拉的菜单
    searchMes.value = mes.value.filter(item => { // 变量存储搜索的数据
        return item.name.slice(0, value.value.length) === value.value
    })
    if (!searchMes.value[0]) {
        showDialog({
            message: '没有该联系人',
        }).then(() => {
            value.value = ''
            show.value = true
            showPerson.value = ''
        })
    }
    console.log('搜索的数据', searchMes.value);
}
// 对选中按钮的操作
function onShowIfo(id, inputId, url) {
    console.log('传入的id', id);
    const ipID = inputId.regexp
    console.log(ipID);
    if (document.querySelector('.' + ipID)) {
        document.querySelector('.' + ipID).checked = !document.querySelector('.' + ipID).checked
    }
    console.log(document.querySelector('.' + ipID));
    if (document.querySelector('.' + ipID).checked) {
        document.querySelector('.btn').style.backgroundColor = 'rgb(255, 152, 0)'
        document.querySelector('.btn').style.color = '#fff'
    } else {
        document.querySelector('.btn').style.backgroundColor = 'rgb(238, 238, 238)'
        document.querySelector('.btn').style.color = 'rgb(153, 153, 153)'
    }
}
// 创建按钮的实现
function newGroup() {
    showDialog({
        message: '创建成功',
    }).then(() => {
        getGroupChatList().then(res => {
            res.data.message.push({
                'id': 5,
                nickname: '新建群聊',
                all_messages: '',
                url: 'https://pic4.zhimg.com/50/v2-6afa72220d29f045c15217aa6b275808_hd.jpg?source=1940ef5c,https://pic4.zhimg.com/50/v2-6afa72220d29f045c15217aa6b275808_hd.jpg?source=1940ef5c'
            },)
            const groupMes = [...res.data.message]
            console.log(groupMes);
            window.localStorage.setItem('data',JSON.stringify(groupMes))
        })

        router.push('/message/group')
        // value.value = ''
        // show.value = true
        // showPerson.value = ''
    })
}
</script>

<template>
    <div class="box">
        <!-- 顶部返回、显示区域 -->
        <van-nav-bar v-if="mes[0]" title="选择联系人" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>

        <!-- 1.表单组件————搜索  点击键盘上的搜索/回车按钮后触发-->

        <van-search @search="onSearch" v-model="value" input-align="left" shape="round" placeholder="搜索" />

        <div class="content ">
            <!-- 2.好友列表 -->

            <van-tag v-if="show" type="danger" size="large" v-for="(item, index) in mes" :key="item.id"
                @click="onShowIfo(item.id, item.inputId, item.url)">
                <!-- 选择按钮 -->
                <!-- <van-radio :name="index"></van-radio> -->
                <input type="checkbox" class="van-radio" :checked="inputCheck" :class="item.inputId.regexp">
                <!-- 基础组件————image图片 -->
                <van-image round width="55px" height="55px" :src="mes[index].url" />
                <div class="text" style="margin-left: 20px; position: relative;">
                    <p>{{ item.name }}</p>
                </div>
            </van-tag>

            <!-- 2.2搜索时展示的好友列表 -->

            <!-- <van-tag v-else type="danger" size="large" v-for="item in searchMes"@click="onShowIfo(item.id, item.name, item.url)"> -->
            <van-tag v-else type="danger" size="large" v-for="item in searchMes">
                <input type="checkbox" class="van-radio">
                <!-- 基础组件————image图片 -->
                <van-image round width="55px" height="55px" :src="item.url" />
                <div class="text" style="margin-left: 20px; position: relative;">
                    <p>{{ item.name }}</p>
                </div>
            </van-tag>
        </div>
        <van-button class="btn" type="primary" round @click="newGroup">立即创建</van-button>

    </div>
</template>


<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.van-dialog {
    p {
        text-align: center;
        font-size: 14px;
        color: rgb(100, 101, 102);
        margin-top: 10px;
    }

    .p2 {
        margin-bottom: 20px;
    }
}

.van-search {
    margin-bottom: 10px;
    width: 94%;
    margin: 0 auto;
}

.van-tabs {
    width: 204px;

}

.van-tag {
    display: flex;

    .text {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .van-radio {
        width: 20px;
        height: 20px;
        margin-right: 18px;
    }

    input[type="checkbox"] {
        width: 20px;
        height: 20px;
        display: inline-block;
        text-align: center;
        vertical-align: baseline;
        line-height: 20px;
        position: relative;
        border-radius: 50%;
        outline: none;
        -webkit-appearance: none;
        ​border: 1px solid #fff;
        -webkit-tab-highlight-color: rgba(0, 0, 0, 0);
        color: #fff;
        background: #fff;
        margin-left: 3px;

    }

    input[type="checkbox"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 100%;
        border: 1px solid #999999;
        border-radius: 50%;
        color: #fff;
        margin-top: 5px;
    }

    input[type=checkbox]:checked::before {
        content: "\2713";
        /* background-color: #657afe; */
        border: 1px solid #657afe;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        color: red;
        font-size: 20px;
        border-radius: 50%;
    }


}

.van-button {
    margin: 0 auto;
    width: 70%;
    line-height: 50px;
    margin-top: 7px;
    margin-bottom: 7px;
    color: rgb(153, 153, 153);
    // background-color: #FFF;
    background-color: rgb(238, 238, 238);
    border: none;
}

.active {
    font-size: 50px;
}

.van-tag--large {
    margin: 0 auto;
    width: 336px;
    height: 60px;
    color: black;
    background-color: #FFF;
    border-bottom: 1px solid rgb(248, 239, 239);
}
</style>